<template>
	<view class="tab-page mine">
		<view class="Bg-top">
			<up-navbar :auto-back="false" title-width="200" placeholder bgColor="transparent" :fixed="false">
				<template v-slot:left>
					<text class="title">我的</text>
				</template>
			</up-navbar>
			<view class="box">
				<view class="container">
					<view class="card" @tap="goPage('/pageSubOne/mine/mine-info')">
						<view @tap.stop="onShowFullImage">
							<image :src="userInfo.headImage" class="avatar" v-if="userInfo.headImage"></image>
							<head-image :name="userInfo.nickName" :size="110" class="avatar" v-else></head-image>
						</view>
						<view class="bgCode" @tap.stop.native="goCodePage">
							<svg-icon icon="QR-code" :width="48"></svg-icon>
						</view>
						<view class="content">
							<view class="username">
								<text class="text-lg-Medium">{{ userInfo.nickName }}</text>
								<svg-icon icon="sex" :width="32" v-if="userInfo.sex==0"></svg-icon>
								<svg-icon icon="woman" :width="32" v-if="userInfo.sex==1"></svg-icon>
							</view>
							<view class="number">
								<view>
									<text class="text-sm-Regular">好友号：</text><text
										class="text-sm-Medium">{{ userInfo.userFriendId }}</text>
								</view>
								<view>
									<text class="text-sm-Regular">友商号：</text><text
										class="text-sm-Medium">{{ userInfo.userBusinessId }}</text>
								</view>
								<view>
									<text class="text-sm-Regular">升级包：</text><text
										class="text-sm-Medium">{{ menuNum }}</text>
								</view>
								<!-- <view>
									<text class="text-sm-Regular">商龄：</text><text class="text-sm-Medium">1年</text>
								</view> -->
							</view>
							<view class="invite-code">
								<view v-if="shareInfo && shareInfo.shareCode" class="haveCode">
									<text class="text-sm-Regular">我的邀请码：</text>
									<view class="clone">
										<text class="text-sm-Medium" @click.stop="getSharingCode">{{ shareInfo.shareCode
											}}</text>
										<view @click.stop="copy2">
											<svg-icon icon="clone" :width="32"></svg-icon>
										</view>
									</view>
								</view>
								<view v-else class="haveCode">
									<text class="text-sm-Regular">我的邀请码：</text>
									<text class="text-sm-Medium" @click.stop="getSharingCode">点击获取</text>
								</view>
							</view>
						</view>
					</view>
					<view class="list-contacts">
						<list-contacts type="user" status="contact" :List="UserList"></list-contacts>
					</view>

					<!-- #ifndef APP-PLUS -->
					<view>
						<up-divider text="更多功能敬请期待"></up-divider>
					</view>
					<!-- #endif -->

				</view>
			</view>
		</view>

		<!-- #ifdef APP-PLUS -->
		<view>
			<custom-tabbar :selected="4"></custom-tabbar>
		</view>
		<!-- #endif -->
	</view>
	<up-popup :show="showCode" mode="center" round="8" @close="showCode=false">
		<code-popup :show="showCode" :share-data="share"
			:qr-url="`https://h5.dgyxy.com/pageSubOne/common/user-info?id=${userInfo.id}&chatIdx=null&sourceType=0&fromThis=false&from=true`"></code-popup>
	</up-popup>
	<up-popup :show = "showRecomm" mode="center">
		  <view class="recommContent">
			  <view class="recommContent_top">
				  <view>根据您完善的个人信息，为您推荐以下群聊</view>
				  <view @click="showRecomm=false">关闭</view>
			  </view>
			  <view class="recommContent_xia" v-for="(user,index) in recommList" :key="user.id">
			  	<view class="user-item">
			  		<head-image :url="user.headImage" :name="user.name" :size="100" :isGroup="true"></head-image>
			  		<view class="user-name">
			  			<view class="fc">
			  				<badge type="business-group" :title="user.badge"></badge>
			  				<text>{{ user.name }}</text>
			  			</view>
			  		</view>
			  	</view>
				<view class="user-btns">
					<view class="btncolor" @click="addcolony(user)">{{user.addloading ? '申请群聊' : '已添加'}}</view>
				</view>
			  </view>
		  </view>
	</up-popup>
</template>

<script>
	export default {
		data() {
			return {
				showRecomm:false,
				recommList:[],
				showCode: false, //显示二维码弹出层
				shareInfo: {},
				share: { //分享好友
					title: '邀请你加入',
					path: '',
					imageUrl: 'https://file.dgyxy.com/resource/backgroud2.png',
					desc: '通过友星缘，添加我为好友吧',
					content: ''
				},
				UserList: [{
						icon: "钱包2",
						message: "我的钱包",
						time: "",
						path: "/pageSubOne/wallet/wallet"
					},
					{
						icon: "gift-3",
						message: "我的邀请",
						time: "",
						path: "/pageSubOne/mine/mine-share"
					},
					// #ifndef APP-PLUS
					{
						icon: "clipboard-list",
						message: "套餐购买",
						time: "",
						path: "/pageSubOne/mine/mine-setmenu"
					},
					// #endif
					{
						icon: "收藏 -已收藏",
						message: "商品收藏",
						time: "",
						path: "/pageSubOne/mine/shoppcollect"
					},
					/* {
						icon: "clipboard-list",
						message: "账单",
						time: "",
						path: ""
					}, */
					{
						icon: "bookmark-plus",
						message: "收藏",
						time: "",
						path: "/pageSubOne/mine/mine-favorite"
					}, {
						icon: "user-list",
						message: "个人信息",
						time: "",
						path: "/pageSubOne/mine/mine-info"
					},
					{
						icon: "house-settings",
						message: "设置",
						time: "",
						path: "/pageSubOne/mine/mine-setting"
					},
					// {
					// 	icon: "house-settings",
					// 	message: "邀请函",
					// 	time: "",
					// 	path: "/pageSubOne/common/invitation-letter"
					// }, 
				],
				menuNum: 0
			}
		},
		computed: {
			userInfo() {
				return this.userStore.userInfo;
			},
		},
		methods: {
			getrecommList() {
					this.$http({
						url:"/recommend/group",
						method: "GET"
					}).then((data) => {
						if(data.length > 0){
						data.forEach(item => {
							let firstFour = item.name.slice(0, 4);
							item.badge = firstFour;
			                item.addloading = true;
						})
						this.recommList = data
						this.showRecomm = true
						}
					})
			},
			addcolony(user){
				if(user.addloading){
					user.addloading = false
					let data = {
						groupId: user.id,
						ids: [this.userStore.userInfo.id]
					}
					this.$http({
						url: "/group/applyGroupById",
						method: "POST",
						data: data
					}).then(() => {
						uni.showToast({
							title: "加入群聊成功",
							icon: "none"
						})
					})
				}else{
					uni.showToast({
						title: "您已加入群聊！",
						icon: "none"
					})
				}
				
			},
			//查看头像
			onShowFullImage() {
				let imageUrl = this.userInfo.headImage;
				if (imageUrl) {
					uni.previewImage({
						urls: [imageUrl]
					})
				}
			},
			getmenuNum() {
				this.$http({
					url: "/quota/info",
					method: "get",
				}).then((res) => {
					this.menuNum = res
				})
			},
			// 获取邀请码
			getSharingCode() {
				uni.navigateTo({
					url: "/pageSubOne/mine/mine-share-code"
				})
			},

			_getData() {
				this.$http({
					url: `/share/shareAggregateData`,
					method: 'GET'
				}).then(res => {
					this.shareInfo = res
				})
			},
			// 拷贝邀请码
			copy2() {
				let text = this.shareInfo.shareCode

				uni.setClipboardData({
					data: text.toString(),
					success: function(res) {
						console.log('复制的信息2：', text);
						uni.showToast({
							title: '复制成功',
						});
					}
				});
			},
			goCodePage() {
				// uni.navigateTo({
				// 	url: "/pageSubOne/mine/mine-code"
				// })
				this.showCode = true
			},
			closeCode(show) {
				this.showCode = show
			}
		},
		onShow() {
			this._getData()
			this.getmenuNum()
			this.getrecommList()
		},
		onLoad() {
			this.share.path =
				`/pageSubOne/common/user-info?id=${this.userInfo.id}&chatIdx=null&sourceType=0&fromThis=false&from=true`;

		}
	}
</script>

<style lang="scss" scoped>
	/* #ifdef H5 */
	:deep(.u-transition.u-fade-enter-to.u-fade-enter-active) {
		z-index: 999 !important;
	}

	:deep(.u-transition.u-fade-zoom-enter-to.u-fade-zoom-enter-active) {
		z-index: 999 !important;
	}

	/* #endif */
	.mine {
		.Bg-top {
			width: 100%;
			background-repeat: no-repeat;
			background-image: url('https://file.dgyxy.com/resource/bgDefault.png');
			background-size: 100% 100%;
			/* #ifndef MP-WEIXIN */
			padding-bottom: 180rpx;
			/* #endif */
			z-index: 100;

			.title {
				font-size: 40rpx;
				font-weight: bold;
				padding: 0 3px;
			}
		}

		.box {
			padding-top: 60rpx;
			width: 100%;

			.container {
				// width: 100%;
				// height: 506px;
				margin: 16px;
				background-color: $white;
				border-radius: 8px;
				gap: 12px;

				.card {
					// height: 180px;
					border-radius: 8px;
					padding: 16px;
					position: relative;
					border: 1px solid rgba(209, 224, 255, 0.4);

					.avatar {
						width: 72px;
						height: 72px;
						position: absolute;
						top: -30px;
						border-radius: 50%;
					}

					.bgCode {
						text-align: right;

						.code {
							width: 24px;
							height: 24px;
						}
					}

					.content {
						display: flex;
						flex-direction: column;
						justify-content: center;
						margin-top: 12px;
						gap: 12px;

						.username {
							display: flex;
							align-items: center;
							gap: 4px;
						}

						.number {
							display: flex;
							flex-wrap: wrap;
							// justify-content: flex-start;
							gap: 16px;
							align-items: center;

							text:first-child {
								color: $gray-400;
							}

							text:last-child {
								color: $gray-500;
								// margin-right: 45rpx;
							}
						}

						.invite-code {
							padding: 8px 12px;

							.haveCode {
								display: flex;
								justify-content: space-between;
								align-items: center;
							}

							text:first-child {
								color: $gray-400;
							}

							.clone {
								display: flex;
								align-items: center;
								gap: 4px;

								text {
									color: $brand-500;
								}
							}
						}
					}
				}
			}
		}

		.list-contacts {
			text:first-child {
				margin-left: 8px;
				color: $gray-900;
			}
		}
	}
    .recommContent{
		// width: 100%;
		padding: 10px;
		.recommContent_top{
			display: flex;
			justify-content: space-between;
			view{
				font-size: 12px;
			}
		}
		.recommContent_xia{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.user-btns{
				.btncolor{
					padding: 15rpx;
					margin-left: 20rpx;
					color: #fff;
					background-color: $brand-500;
					border-radius: 10%;
				}
			}
		}
		.user-item {
			//height: 120rpx;
			//border: 1px solid red;
			display: flex;
			align-items: center;
			white-space: nowrap;
			margin: 10px 0;
		
			.btncolor {
				background-color: $brand-500;
				color: $white;
				padding: 8rpx 24rpx;
				border-radius: 34rpx;
				text-align: center;
				line-height: 36rpx;
			}
		
			.user-name {
				padding-left: 20rpx;
				font-size: 25rpx;
				// white-space: nowrap;
				// overflow: hidden;
		
				.fc {
					display: flex;
					align-items: center;
					gap: 8rpx;
				}
				text{
					white-space: nowrap; 
					overflow: hidden;
					text-overflow: ellipsis;
					width: 220rpx;
				}
			}
		
		}
	}
</style>